<template>
    <div class="feixing_container" v-loading="loading" element-loading-spinner="el-icon-loading" element-loading-background="rgba(0, 0, 0, 0)">
        <Rank :subForm="subForm" @getDataList="getDataList" />
        <Table :subForm="subForm" :tableData="tableData" :sql="sql" :total="total" @getDataList="getDataList" />
    </div>
</template>

<script>
import Rank from "./model/Rank";
import Table from "./model/Table";
export default {
    components: {
        Rank,
        Table
    },
    name: "",
    data() {
        return {
            loading: false,
            subForm: {
                blogger_name: "",
                tags_relation: [],
                fans_num: [],
                price_20_60: [],
                price_60: [],
                age: {
                    name: "",
                    range: [],
                },
                crowd: {
                    name: "",
                    range: [],
                },
                sex: {
                    name: "",
                    range: [],
                },
                field: "",
                order: "",
                page: 1,
                limit: 20,
            },
            total: 0,
            sql:"",
            tableData: [],
        };
    },
    created() {
        this.getDataList(1);
    },
    beforeDestroy() {},
    methods: {
        //获取列表
        async getDataList() {
            this.loading = true;
            const { data: res } = await this.$http.post(
                "fxdata/sellibrary/bloggerList",
                this.subForm
            );
            if (res.code !== 200) {
                this.loading = false;
                this.$message.error(res.msg);
                return;
            } else {
                this.sql = res.data.sql
                for (let i in res.data.list) {
                    let ageArr = [];
                    let jobArr = [];
                    ageArr.push({
                        name: "18-23岁",
                        value: (
                            Number(res.data.list[i].fans_age_18_23) * 100
                        ).toFixed(1),
                    });
                    ageArr.push({
                        name: "24-30岁",
                        value: (
                            Number(res.data.list[i].fans_age_24_30) * 100
                        ).toFixed(1),
                    });
                    ageArr.push({
                        name: "31-40岁",
                        value: (
                            Number(res.data.list[i].fans_age_31_40) * 100
                        ).toFixed(1),
                    });
                    ageArr.push({
                        name: "41-50岁",
                        value: (
                            Number(res.data.list[i].fans_age_41_50) * 100
                        ).toFixed(1),
                    });
                    ageArr.push({
                        name: "大于50岁",
                        value: (Number(res.data.list[i].fans_age_50) * 100).toFixed(
                            1
                        ),
                    });

                    jobArr.push({
                        name: "精致妈妈",
                        value: (
                            Number(res.data.list[i].fans_crowd_jzmm) * 100
                        ).toFixed(1),
                    });
                    jobArr.push({
                        name: "小镇青年",
                        value: (
                            Number(res.data.list[i].fans_crowd_xzqn) * 100
                        ).toFixed(1),
                    });
                    jobArr.push({
                        name: "Z时代",
                        value: (
                            Number(res.data.list[i].fans_crowd_zsd) * 100
                        ).toFixed(1),
                    });
                    jobArr.push({
                        name: "新锐白领",
                        value: (
                            Number(res.data.list[i].fans_crowd_xrbl) * 100
                        ).toFixed(1),
                    });
                    jobArr.push({
                        name: "都市蓝领",
                        value: (
                            Number(res.data.list[i].fans_crowd_dsll) * 100
                        ).toFixed(1),
                    });
                    jobArr.push({
                        name: "资深中产",
                        value: (
                            Number(res.data.list[i].fans_crowd_zszc) * 100
                        ).toFixed(1),
                    });
                    jobArr.push({
                        name: "小镇中老年",
                        value: (
                            Number(res.data.list[i].fans_crowd_xzzln) * 100
                        ).toFixed(1),
                    });
                    jobArr.push({
                        name: "都市银发",
                        value: (
                            Number(res.data.list[i].fans_crowd_dsyf) * 100
                        ).toFixed(1),
                    });
                    res.data.list[i].ageArr = ageArr.sort(
                        this.sortFun("value")
                    );
                    res.data.list[i].jobArr = jobArr.sort(
                        this.sortFun("value")
                    );

                    res.data.list[i].img_xt_last_15_videos_play.sort((a, b) => b.create_time.localeCompare(a.create_time));
                }

                this.loading = false;
                this.tableData = res.data.list;
                this.total = res.data.count;
            }
        },

        sortFun(property) {
            return function (a, b) {
                var value1 = a[property];
                var value2 = b[property];
                return value2 - value1; //升序排序
            };
        },
       
    },
};
</script>


<style scoped>

</style>


